<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>角色人员</title>
    <meta name="viewport"
          content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height"/>
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="../york/phone/css/reset.css">
    <link rel="stylesheet" href="role.css">
    <script type="text/javascript" src="http://www.linkdood.cn/jssdk/url/vrv-jssdk.js"></script>
    <script type="text/javascript" src="jq.js"></script>
    <script type="text/javascript" src="../york/phone/js/vue.min.js"></script>
</head>

<body>
<div class="wrap" id="main" v-cloak>
    <nav>
        <ul class="nav">
            <li class="nav-item"
                v-for="item in nav"
                @click="_checkNav(item)">
                {{item.orgName}}
            </li>
        </ul>
    </nav>
    <section class="container">
        <div class="aside">
            <ul>
                <li class="item-wrap"
                    v-if="orgList.length"
                    v-for="item in orgList">
                    <div class="item" :class="{'check-item':checkOrg.orgID == item.orgID}">
                        <div class="check" @click="_choseOrg(item)"></div>
                        <img src="../york/phone/img/org.png">
                        <div class="txt" @click="_checkOrg(item)">{{item.orgName}}</div>
                    </div>
                </li>
                <li class="item-wrap"
                    v-if="staffList.length"
                    v-for="item in staffList">
                    <div class="item">
                        <div class="check"></div>
                        <img src="../york/phone/img/q.png">
                        <div class="txt">{{item.staffName}}</div>
                    </div>
                </li>
            </ul>
        </div>
        <div class="content">
            <div class="cb">
                <div class="item">
                    选中机构：<span class="txt">{{checkOrg.orgName}}</span>
                </div>
                <div class="item">
                    <!--组织角色：<span style="color: #7e7e7e" v-if="!optionsShow">{{checkOrg.orgName}}</span>-->
                    组织角色：
                    <select id="sl">
                        <option v-for="item in options" :value="item.id">
                            {{item.name}}
                        </option>
                    </select>
                </div>
                <div class="btn-wrap">
                    <button @click="_tongbu">同步人员</button>
                    <button @click="_edit">分配角色</button>
                </div>
            </div>
        </div>
    </section>
</div>
</body>

<script>
    vrv.init({
        debug: false
    });
    vrv.ready(function () {
        vrv.jssdk.showNavigationBar({
            show: false
        });
        vm.getList(1);
    });
    var vm = new Vue({
        el: "#main",
        data: {
            checkFlag: "",
            optionsShow: false,
            checkOrg: {orgName: "", orgID: 0},
            nav: [{orgName: "组织架构", orgID: 1}],
            orgList: [],
            staffList: [],
            options: []
        },
        methods: {
            getList: function (id) {
                var self = this;
                vrv.jssdk.getOrganization({
                    orgId: parseInt(id),
                    success: function (res) {
                        self.orgList = res.organization;
                        self.staffList = res.staff;
                    }
                })
            },
            _checkOrg: function (item) {
                this.nav.push(item);
                this.getList(item.orgID);
            },
            _choseOrg: function (item) {
                if (this.checkOrg.orgID == item.orgID) {
                    this.checkOrg = {orgName: "", orgID: 0};
                } else {
                    this.checkOrg = item;
                }
            },
            _checkNav: function (item) {
                var self = this;
                var ni = -1;
                self.nav.forEach(function (i, index) {
                    if (item.orgID == i.orgID) {
                        ni = index;
                    }
                });
                if (ni != -1) {
                    self.nav.length = ni + 1;
                }
                this.getList(item.orgID);
            },
            _tongbu: function () {
                $.ajax({
                    type: 'post',
                    url: '/Cyberspace/sys/user/synch',
                    dataType: 'json',
                    success: function () {
                        alert("同步成功");
                    }
                })
            },
            _edit: function () {
                if (this.checkOrg.orgID != 0) {
                    var arr = [];
                    var org = this.checkOrg;
                    vrv.jssdk.getOrganization({
                        orgId: parseInt(org.orgID),
                        success: function (res) {
                            var d = res.staff;
                            if (d.length) {
                                d.forEach(function (v) {
                                    arr.push({
                                        linkdoodID: v.staffID,
                                        linkdoodName: v.staffName,
                                        photoUrl: v.portraitUrl,
                                        orgName: org.orgName,
                                        orgID: org.orgID
                                    })
                                });
                                var data = {
                                    roleId: $("#sl").val(),
                                    users: JSON.stringify(arr),
                                };
                                $.ajax({
                                    type: 'post',
                                    url: '/Cyberspace/sys/user/distribute',
                                    data: data,
                                    dataType: 'json',
                                    success: function () {
                                        alert("修改成功");
                                    }
                                })
                            } else {
                                alert("此组织下无成员");
                            }
                        }
                    })
                } else {
                    alert("选中机构为空")
                }
            },
        },
        created: function () {
            var self = this;
            $.ajax({
                type: 'get',
                url: '/Cyberspace/sys/role',
                dataType: 'json',
                success: function (data) {
                    self.options = data.result;
                }
            })
        },
        watch: {
            checkRole: function (v) {

            }
        }
    });
</script>
</html>